<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/emigrated">闯关管理</a></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="operate">
      <div style="padding: 10px">
        <div class="add">
          <el-button type="primary" @click="addBarrier">添加关卡</el-button>
        </div>
        <div class="delete">
          <el-button type="danger" plain>批量删除</el-button>
        </div>
        <div class="bankname">请输入关卡名：</div>

        <div class="input">
          <el-input
            v-model="key"
            class="w-50 m-2"
            placeholder="请输入想要查找的关卡名"
            @change="search"
          />
        </div>
        <div class="check">
          <el-checkbox @change="checkbox" label="只看禁用" size="large" />
          <el-checkbox @change="checkbox" label="只看发布" size="large" />
        </div>
      </div>
      <el-table class="table" border :data="tableData">
        <el-table-column prop="Ename" label="关卡名" width="180" />
        <el-table-column prop="Eexplain" label="描述" width="180" />
        <el-table-column label="标签" width="180">
          <template #default="scope">
            <el-tag>{{ scope.row.ELable }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关卡试题数" width="180">
          <template #default="scope">
            <el-tag>{{ scope.row.EquestionCount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关卡数量" width="180">
          <template #default="scope">
            <el-tag>{{ scope.row.EemigratedCount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关卡等级" width="180">
          <template #default="scope">
            <el-tag>{{ scope.row.Elv }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布" width="120">
          <template #default="scope">
            <el-tag
              :type="scope.row.EIsPublish === 0 ? 'warning' : 'success'"
              disable-transitions
              >{{ scope.row.EIsPublish === 0 ? "否" : "是" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="禁用" width="120">
          <template #default="scope">
            <el-tag
              :type="scope.row.EIsBan === 0 ? 'success' : 'warning'"
              disable-transitions
            >
              {{ scope.row.EIsBan === 0 ? "否" : "是" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button
              type="primary"
              @click="dateliBarrier(scope)"
              size="small"
            >
              详情
            </el-button>
            <el-button
              v-if="scope.row.EIsPublish === 1"
              :type="scope.row.EIsBan === 0 ? 'warning' : 'success'"
              @click="IsBan(scope)"
              size="small"
            >
              {{ scope.row.EIsBan === 0 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              v-if="scope.row.EIsPublish === 0"
              :type="scope.row.EIsPublish === 0 ? 'success' : 'info'"
              @click="IsPublish(scope)"
              size="small"
            >
              {{ scope.row.EIsPublish === 0 ? "发布" : "取消" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { Emigrated } from "@/utils/Exam/emigrted/emigrted";
import router from "@/router";
export default defineComponent({
  setup() {
    const data = reactive<Emigrated>({
      tableData: [
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          ELable: ".NET",
          EquestionCount: 200,
          EemigratedCount: 10,
          Elv: 5,
          EIsPublish: 0,
          EIsBan: 0,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          ELable: "JAVA",
          EquestionCount: 200,
          EemigratedCount: 10,
          Elv: 5,
          EIsPublish: 1,
          EIsBan: 1,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          ELable: "前端",
          EquestionCount: 200,
          EemigratedCount: 10,
          Elv: 5,
          EIsPublish: 1,
          EIsBan: 0,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          ELable: "后端",
          EquestionCount: 200,
          EemigratedCount: 10,
          Elv: 5,
          EIsPublish: 0,
          EIsBan: 0,
        },
      ],
      key: "",
      timekey: "",
      checkbox: 0,
    });
    const methods = {
      //添加关卡
      addBarrier() {
        router.push("/emigrated/addEmigrated");
      },
      //关卡详情
      dateliBarrier(val: any) {
        router.push("/emigrated/dateliEmigrated/" + val.row.Ename);
      },
      //模糊查询
      search(val: any) {
        console.log(val);
      },
      //禁用
      IsBan(val: any) {
        if (val.row.EIsBan === 1) {
          val.row.EIsBan = 0;
        } else {
          val.row.EIsBan = 1;
        }
      },
      //发布
      IsPublish(val: any) {
        if (val.row.EIsPublish === 1) {
          val.row.EIsPublish = 0;
        } else {
          val.row.EIsPublish = 1;
        }
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.operate {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: white;
  width: 94%;
}
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.table {
  width: 95%;
  margin: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}
.block {
  display: inline-block;
}
.check {
  margin-left: 30px;
  display: inline-block;
}
.add {
  margin-left: 50px;
  display: inline-block;
}
.delete {
  margin-left: 50px;
  display: inline-block;
}
.paging {
  margin: 20px;
}
.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}
</style>